<template>
  <view style="padding-bottom: 80rpx">
    <view class="back" @click="goBack">
      <u-icon name="arrow-left" size="24" color="#fff"></u-icon>
    </view>
    <image class="bg" src="../../static/my/bg.png" mode="aspectFill" />
    <view class="main info">
      <view class="gr">
        <image src="" class="head" mode="aspectFill" />
        <view class="name">想过风 <view class="label">金牌专家</view></view>
      </view>
      <view class="grInfo">
        <view class="item">
          <view>880</view>
          <view class="l">粉丝</view>
        </view>
        <view class="item">
          <view>880</view>
          <view class="l">服务人次</view>
        </view>
        <view class="item">
          <view>880</view>
          <view class="l">从医时间</view>
        </view>
      </view>
      <view class="jj">
        <view class="lb"> 咨询方向 </view>
        <view>瘦脸轮廓、瘦脸轮廓、瘦脸轮廓 </view>
      </view>
      <view class="jj">
        <view class="lb"> 医生简介 </view>
        <view>张三，主治医师，学士学位，毕业于郑州大学临床医学系。从事妇科工作十余年，曾在郑大一附院深 </view>
      </view>
    </view>
    <view class="main box">
      <view>医院荣誉</view>
      <u-scroll-list :indicator="false">
        <view v-for="(item, index) in 4" :key="index">
          <image class="pjImg" src="" mode=""></image>
        </view>
      </u-scroll-list>
    </view>
    <view class="main box lxfs">
      <view>联系方式</view>
      <view><u-icon name="arrow-right"></u-icon></view>
    </view>
    <view class="main">
      <!-- <view class="">出诊医院</view> -->
      <FyItem />
    </view>
  </view>
</template>
<script setup lang="ts">
import { goBack } from "@/utils/commonFn";
import FyItem from "./components/FyItem.vue";
</script>
<style lang="less" scoped>
.bg {
  height: 472rpx;
  width: 100%;
}
.box {
  background: #ffffff;
  border-radius: 32rpx 32rpx 32rpx 32rpx;
  padding: 32rpx;
}
.info {
  background: #ffffff;
  border-radius: 32rpx 32rpx 32rpx 32rpx;
  position: relative;
  z-index: 99;
  padding: 32rpx;
  margin-top: -120rpx;
  .gr {
    display: flex;
    flex-direction: column;
    align-items: center;
    .head {
      margin-top: -120rpx;
      width: 160rpx;
      height: 160rpx;
      border: 4rpx solid #81d8d0;
      border-radius: 50%;
    }
    .name {
      margin-top: 24rpx;
      display: flex;
      align-items: center;
      font-size: 30rpx;
      color: #333333;
      gap: 16rpx;
      .label {
        font-size: 24rpx;
        color: #b68f54;
        background: #feeacf;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        padding: 8rpx;
      }
    }
  }
  .grInfo {
    display: flex;
    justify-content: space-between;
    padding: 40rpx 108rpx;
    .item {
      text-align: center;
      .l {
        font-size: 22rpx;
        color: #8a8a8d;
      }
    }
  }
  .jj {
    display: flex;
    font-size: 24rpx;
    color: #333333;
    margin-top: 26rpx;
    margin-bottom: 32rpx;
    .lb {
      flex-shrink: 0;
      font-size: 24rpx;
      color: #8a8a8d;
      width: 110rpx;
    }
  }
}
.pjImg {
  width: 240rpx;
  height: 160rpx;
  border-radius: 16rpx;
  margin-right: 15rpx;
  background: salmon;
  margin-top: 20rpx;
}
.lxfs {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
